import React, {CSSProperties, FC, useContext} from 'react'
import classNames from "classnames";
import {MenuContext} from "./menu";


export interface IMenuItemProps {
  index?: string
  disabled?: boolean
  className?: string
  style?: CSSProperties
}


const MenuItem: FC<IMenuItemProps> = (props) => {

  const {index, disabled, className, style, children} = props

  // 使用menu父组件接收的参数
  const context = useContext(MenuContext);

  const classes = classNames("menu-item", className, {
    'is-disabled': disabled,
    'is-active': index === context.index
  })

  const handleClick = () => {
    // 如果函数和disabled不存在就不触发点击事件
    if (context.onSelect && !disabled && (typeof index === 'string')) {
      context.onSelect(index)
    }
  }

  return (
    <li className={classes} style={style} onClick={handleClick}>{children}</li>
  )
}

MenuItem.displayName = 'MenuItem'
export default MenuItem
